<template>
  <div id="echarts"></div>
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      pathName: "",
    };
  },
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      this.myChart = echarts.init(document.getElementById("echarts"));
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "本站主要内容占比",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "图片相册管理",
            type: "pie",
            radius: "70%",
            data: [
              { value: 55, name: "图片收集" },
              { value: 17, name: "文章" },
              { value: 23, name: "视频" },
              { value: 37, name: "前端入门" },
              { value: 34, name: "网络基础" },
              { value: 28, name: "js数据结构与算法" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.6)",
              },
            },
          },
        ],
      };
      let _this = this; //注意，要将this进行指代，否则在click里面this指向发生了改变
      this.myChart.setOption(option);
      //用户点击了某一项内容点击事件
      this.myChart.on("click", function (params) {
        _this.$bus.$emit("chooseItem", params.name);
      });
    },
  },
  watch: {
    // 监听当前是否点击了其他item，若是，则将新的pathName传给兄弟组件进行展示
    pathName() {
      // 通知兄弟组件
      console.log(this.pathName);
      // this.$bus.$emit("chooseItem", this.pathName);
    },
  },
};
</script>
<style lang="less" scoped>
</style>
